<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Colors</title>
</head>
<body>
<!-- Default colors -->
<!-- white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber,  -->

<!-- Text Colors -->
<p class="text-black">Tailwind is awesome</p>
<p class="text-blue-400">Tailwind is awesome</p>
<p class="text-red-400">Tailwind is awesome</p>
<p class="text-green-400">Tailwind is awesome</p>
<p class="text-emerald-400">Tailwind is awesome</p>
<p class="text-zinc-400">Tailwind is awesome</p>
<p class="text-slate-400">Tailwind is awesome</p>

<!-- Background Colors -->
<p class="bg-black text-white">Tailwind is awesome</p>
<p class="bg-white">Tailwind is awesome</p>
<p class="bg-red-100">Tailwind is awesome</p>
<p class="bg-yellow-500">Tailwind is awesome</p>
<p class="bg-green-400">Tailwind is awesome</p>
<p class="bg-pink-300">Tailwind is awesome</p>
<p class="h-20 bg-gradient-to-r from-red-100 via-purple-200 to-blue-400">Tailwind is awesome</p>

<!-- Text Underline -->
<p class="underline">Tailwind is awesome</p>
<p class="underline decoration-red-800">Tailwind is awesome</p>
<p class="underline decoration-emerald-800">Tailwind is awesome</p>
<p class="underline decoration-yellow-800">Tailwind is awesome</p>

<!-- Border Colors -->
<input type="text" class="border border-red-500">
<input type="text" class="border border-yellow-500">
<input type="text" class="border border-orange-500">

<!-- Divide Colors -->
<div class="divide-y divide-blue-500">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
</div>
<!-- Outline Colors -->
<button class="outline bg-blue-500 text-white outline-red-600">
    Outline
</button>
<button class="outline bg-blue-500 text-white outline-yellow-600">
    Outline
</button>
<!-- Box Shadow Colors (Opacity defaults to 100, but you can set it)-->
<div class=" shadow-lg shadow-cyan-500 bg-cyan-500">
    Tailwind is great
</div>

<button class=" shadow-lg shadow-purple-500/100 bg-cyan-500">
    Tailwind is great
</button>
<!-- Accent Colors -->
<input type="checkbox" class="accent-blue-500" checked>
<input type="checkbox" class="accent-yellow-400" checked>
<!-- Arbitrary Colors -->
<div class="bg-[rgb(21,93,252)]">
    Hello
</div>
<div class="bg-[#26A69A]">Hello</div>
</body>
</html>
